<template>
	<view v-if="props.section.smallCardList">
		<!-- 标题 -->
		<h-product-header		 
		 :categoryName="props.section.categoryName.text"></h-product-header>
		 <!-- 卡片 -->
		<h-product-card :largeCard="props.section.largeCard">		
		</h-product-card>
		<view class="smallCardList">
			<view class="product"  v-for="item in props.section.smallCardList">
				<h-product-item				
				 :product="item"
				 ></h-product-item>
			</view>
			
		</view>
	</view>
</template>

<script setup>
	import {defineProps} from 'vue';
	
	const props = defineProps({
		section:{type:Object,default(){return {}}}
	})
	 
</script>

<style scoped lang="scss">
.smallCardList{
	padding: 20rpx;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	.product{
		width: 345rpx;
	}
}
</style>